<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import { lineChart } from "@/api/cms/charts";

export default {
  mixins: [resize],
  name:"lineChart",
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null,
      datex: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      blogData: [100, 120, 161, 134, 105, 160, 165],
      commentData: [120, 82, 91, 154, 162, 140, 145],
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.getLineChartData();
    },
    getLineChartData() {
      lineChart().then(response => {
        this.datex = response.datex;
        this.blogData = response.blogData;
        this.commentData = response.commentData;
        this.messageData = response.messageData;
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
      });
    },
    setOptions({ blogColor, commentColor } = {}) {
      this.chart.setOption({
        backgroundColor: '#fff', // 设置背景色
        xAxis: {
          type: 'category',
          data: this.datex,
          axisTick: {
            show: false
          },
          axisLine: { lineStyle: { color: '#aaa' } }, // 轴线颜色
          axisLabel: { color: '#333' } // 轴标签颜色
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: { lineStyle: { color: '#aaa' } }, // 轴线颜色
          splitLine: { lineStyle: { color: ['#eee'] } }, // 分割线颜色
          axisLabel: { color: '#333' } // 轴标签颜色
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          padding: [5, 10]
        },
        legend: {
          data: ['文章', '评论'],
          textStyle: { color: '#333' } // 图例文字颜色
        },
        series: [
          {
            name: '文章',
            type: 'line', // 更改为折线图
            symbol: 'circle', // 折线图的点形状
            symbolSize: 10, // 折线图的点大小
            lineStyle: {
              width: 2, // 折线宽度
              color: new echarts.graphic.LinearGradient(
                0, 0, 1, 0,
                [
                  { offset: 0, color: '#3888fa' },
                  { offset: 1, color: '#67bfff' }
                ]
              ),
              shadowColor: 'rgba(0, 0, 0, 0.1)', // 折线阴影颜色
              shadowBlur: 10 // 折线阴影模糊度
            },
            data: this.blogData,
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          },
          {
            name: '评论',
            type: 'line', // 更改为折线图
            symbol: 'circle', // 折线图的点形状
            symbolSize: 10, // 折线图的点大小
            lineStyle: {
              width: 2, // 折线宽度
              color: new echarts.graphic.LinearGradient(
                0, 0, 1, 0,
                [
                  { offset: 0, color: '#FF005A' },
                  { offset: 1, color: '#FF6B9D' }
                ]
              ),
              shadowColor: 'rgba(0, 0, 0, 0.1)', // 折线阴影颜色
              shadowBlur: 10 // 折线阴影模糊度
            },
            data: this.commentData,
            animationDuration: 2800,
            animationEasing: 'cubicInOut'
          }
        ]
      })
    }
  }
}
</script>

